<template>
	<view class="service-list-item">
		<view @tap.stop="goDetail" class="list-item flex-warp">
			<!-- #ifdef H5 -->
			<view class="cover radius-16">
				<view class="h5-image cover radius-16" :style="{ backgroundImage: `url('${info.cover}')` }">
				</view>
			</view>
			<!-- #endif -->
			<!-- #ifndef H5 -->
			<image mode="aspectFill" lazy-load class="cover radius-16" :src="info.cover"></image>
			<!-- #endif -->
			<view class="flex-1 ml-md" :style="{ maxWidth: maxWidth }">
				<view class="flex" style="align-items: center">
					<view>
						<auth>
							<view class=" f-icontext pd-sm flex-center c-base radius-24"
								style="width: 60rpx;height: 30rpx;color: rgb(222, 212, 203); background-color: rgb(48, 42, 37);">
								直选
							</view>
						</auth>
					</view>
					<view class="f-title c-title text-bold max-270 ellipsis" style="margin-left: 15rpx;">{{ info.title }}
					</view>
					<!-- <view class="f-caption c-caption">超{{ info.total_sale }}人选择</view> -->
				</view>
				<view class="f-caption c-caption mt-sm mb-sm ellipsis" style="height: 36rpx;">{{ info.sub_title || '' }}
				</view>
				<view class="f-caption c-caption" v-if="info.material_price * 1 > 0">物料费：¥{{ info.material_price }}</view>
				<view style="height: 35rpx;"></view>
				<view class="flex-between">
					<view class="flex-y-center f-desc c-caption max-350 ellipsis">
						<view class="flex-y-baseline f-icontext c-orange text-bold mr-sm">
							<b class="f-caption c-orange"></b>
							<view class="f-md-title">
								{{ info.price }}
							</view>
						</view>
						<view v-if="info.init_price" style="color: rgb(179, 101, 99);font-size: 20rpx;">元/次</view>
						<view class="servefc ml-md">
							<span class="f-caption c-title flex flex-between" style="font-size: 20rpx;">500元
								<view>
									<auth>
										<view class=" f-icontext flex-center c-base"
											style="width: 40rpx;height: 15rpx;color: rgb(222, 212, 203); background-color: rgb(48, 42, 37);">
											VIP
										</view>
									</auth>
								</view>
							</span>
						</view>
					</view>
					<auth @tap.stop.prevent :needAuth="userInfo && (!userInfo.phone || !userInfo.nickName)" :must="true"
						:type="!userInfo.phone ? 'phone' : 'userInfo'" @go="toChoose" style="width:190rpx">
						<view class="flex-between">
							<view class="item-btn flex-center f-caption c-base"
								:style="{ background: `linear-gradient(68deg, ${primaryColor}, ${subColor})` }">
								{{ from == 'technician-info' ? `立即预约` : `选择${$t('action.attendantName')}` }}
							</view>
						</view>
					</auth>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
import {
	mapState,
	mapMutations
} from "vuex"
export default {
	components: {},
	props: {
		from: {
			type: String,
			default() {
				return 'list'
			}
		},
		sid: {
			type: Number,
			default() {
				return 0
			}
		},
		info: {
			type: Object,
			default() {
				return {}
			}
		},
		maxWidth: {
			type: String,
			default() {
				return '490rpx'
			}
		}
	},
	data() {
		return {
			textType: {
				1: '可服务',
				2: '服务中',
				3: '可预约',
				4: '不可预约'
			},
		}
	},
	computed: mapState({
		primaryColor: state => state.config.configInfo.primaryColor,
		subColor: state => state.config.configInfo.subColor,
		userInfo: state => state.user.userInfo,
	}),
	methods: {
		// 详情
		goDetail() {
			let {
				id
			} = this.info
			let {
				sid: store_id = 0
			} = this
			let url = `/user/pages/detail?id=${id}&store_id=${store_id}`
			this.$util.goUrl({
				url
			})
		},
		// 选择技-师
		toChoose() {
			let {
				from
			} = this
			if (from == 'technician-info') {
				this.$emit('order')
				return
			}
			let {
				id
			} = this.info
			let {
				sid: store_id = 0
			} = this
			let url = `/user/pages/choose-technician?id=${id}&store_id=${store_id}`
			this.$util.goUrl({
				url
			})
		},
		toEmit(key) {
			this.$emit(key)
		}
	}
}
</script>

<style scoped lang="scss">
.service-list-item {
	.list-item {
		.cover {
			width: 180rpx;
			height: 180rpx;
		}

		.time-long {
			min-width: 72rpx;
			height: 30rpx;
			padding: 0 5rpx;
			background: linear-gradient(270deg, #4C545A 0%, #282B34 100%);
			border-radius: 4rpx;
			font-size: 20rpx;
			color: #FFEEB9;
			margin-right: 16rpx;
		}

		.f-icontext {
			font-size: 18rpx;
		}

		.text-delete {
			font-size: 24rpx;
			color: #B9B9B9;
		}

		.item-btn {
			min-width: 150rpx;
			height: 52rpx;
			padding: 0 10rpx;
			border-radius: 100rpx;
		}
	}
}

.servefc {
	display: flex;
	align-items: center;
}
</style>